18 댓글 삭제 기능 구현 (API 기반) | ✅ 편저: 코담 운영자

18강 - 댓글 삭제 기능 구현 (API 기반)

댓글 삭제 - api 개발

---

✨ 이번 강의 목표

• 로그인한 본인의 댓글만 삭제 가능하도록 구현
• Ajax 기반으로 댓글 삭제 처리
• 템플릿, API, JS 연동을 통한 실시간 인터페이스 구축

---

1. 로그인된 사용자 정보는 템플릿에서 자동 제공

Django 템플릿에서는 로그인된 사용자 정보인 user 객체를 기본적으로 사용할 수 있습니다. 이는 context_processors 설정 덕분입니다.

# settings.py > TEMPLATES 옵션
'context_processors': [
    'django.contrib.auth.context_processors.auth',  # ✅ user 객체 자동 주입
]

템플릿 예시

{% if user.is_authenticated %}
    <p>안녕하세요, {{ user.username }}님!</p>
{% endif %}

---

2. 댓글 삭제 버튼 템플릿에 추가

{% if loginUser == comment.author.username %}
  <span class="font-semibold text-gray-800 mr-3"
        onclick="commentDelete('{{ comment.id }}', '{{ post.csrf_token }}', this)">
    <i class="fa fa-trash-o fa-lg text-red-500 cursor-pointer hover:text-red-700"></i>
  </span>
{% endif %}

• loginUser는 API에서 추가 전달된 로그인 사용자 이름
• 댓글 작성자의 username과 비교하여 삭제 버튼 노출 조건 처리

---

3. URL 설정 - 댓글 삭제

posts/urls.py

path('<int:comment_id>/comment_delete/', views.comment_delete, name='comment_delete'),

• 댓글 삭제는 DELETE 메서드 사용
• RESTful 스타일 URL 패턴 사용

---

4. 댓글 삭제 뷰 함수

from django.http import JsonResponse
from django.shortcuts import get_object_or_404
from django.views.decorators.http import require_http_methods
from django.contrib.auth.decorators import login_required
from django_instagram.posts import models

@require_http_methods(["DELETE"])
@login_required
def comment_delete(request, comment_id):
    comment = get_object_or_404(models.Comment, pk=comment_id)

    if comment.author == request.user:
        comment.delete()
        return JsonResponse({"success": True, "message": "댓글이 삭제되었습니다."}, status=200)

    return JsonResponse({"success": False, "message": "삭제 권한이 없습니다."}, status=403)

✅ 핵심 설명

• @require_http_methods(["DELETE"]) → DELETE만 허용
• @login_required → 비로그인 사용자 접근 제한
• 작성자 본인만 삭제 가능

---

5. JS 파일에서 댓글 삭제 처리

async function commentDelete(commentId, csrfToken, target) {
  if (confirm("정말 삭제 하시겠습니까?")) {
    try {
      const response = await fetch(`/posts/${commentId}/comment_delete/`, {
        method: "DELETE",
        headers: {
          'X-CSRFToken': csrfToken
        }
      });

      const data = await response.json();

      if (!response.ok) throw new Error(data.error);

      if (data.success) {
        target.closest(`#comment-${commentId}`).remove();
      }
    } catch (error) {
      console.error("댓글 삭제 실패", error);
      alert("댓글 삭제에 실패했습니다.");
    }
  }
}

• 삭제 요청은 fetch() + DELETE 방식으로 전송
• 삭제 확인 후 DOM에서 댓글 제거

---

6. API 응답 형식 예시

API 요청 결과 예시 (GET /api/posts/)

{
  "posts": [
    {
      "id": 6,
      "caption": "설명",
      "author": {"username": "admin"},
      "comment_post": [...],
      "csrf_token": "...."
    }
  ],
  "loginUser": "admin"
}

• 템플릿에서 loginUser == comment.author.username 조건으로 삭제 버튼 제어

---

✅ 정리

• 댓글 삭제는 본인이 작성한 댓글만 가능하도록 서버/클라이언트 모두 제어
• DELETE 방식의 API와 Ajax를 활용해 사용자 경험 강화
• 서버 응답에 따른 UI 실시간 갱신 처리

👉 다음 강의에서는 포스트 삭제 기능을 구현합니다.